import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Block} from '@tarojs/components'
import {vcmonitor} from "../../utils/tools";
import {http} from '../../utils/http'
import {RESOURCE_URL} from "../../constants/api";
import './index.scss';

type StateProps = {
  detail: any
  showLoading: any
}

export default class Store extends Component {
  state: StateProps = {
    detail: [],
    showLoading: true
  }

  async componentDidMount() {
    vcmonitor(this)
    const sid = Taro.getCurrentInstance().router.params.sid;
    Taro.showLoading({title: '加载中...'});
    const api = '/msvc-shop/v1/application/shop/app/shop/introduction/picture/' + sid
    const res = await http.HGet(api);
    this.setState({detail: res.data.shop_pitctures ? res.data.shop_pitctures.split(',') : [], showLoading: false});
    Taro.hideLoading();
  }

  previewImage = (current) => {
    Taro.previewImage({
      current: current,
      urls: this.state.detail
    })
  }

  render() {
    const {detail, showLoading} = this.state;
    return (
      <View className='product-detail picture'>
        {detail.length > 0 && <View className='picture-box'>
          <View className='picture-img-left'>
            {detail && detail.map((item, index) => <Block key={index}>
              {index % 2 === 0 && <Image
                className='left-image'
                onClick={this.previewImage.bind(this, item)}
                src={item}
                lazyLoad
                mode='widthFix'
              />}
            </Block>)}
          </View>
          <View className='picture-img-right'>
            {detail && detail.map((item, index) => <Block key={index}>
              {index % 2 !== 0 && <Image
                className='right-image'
                onClick={this.previewImage.bind(this, item)}
                src={item}
                lazyLoad
                mode='widthFix'
              />}
            </Block>)}
          </View>
        </View>}
        {detail.length <= 0 && !showLoading && <View className='listNull'>
          <Image src={`${RESOURCE_URL}/resources/images/carnull.png`} mode='widthFix' />
        </View>}
        <View style='height: 17px;' />
      </View>
    )
  }
}
